<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :width="width" :title="getTitle" @ok="handleSubmit">
    <BasicForm @register="registerForm" class="menuForm" />
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {computed, ref} from 'vue';
import {BasicForm, useForm} from '/@/components/Form/index';
import {copyMenuFormSchema} from './menu.data';
import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
import {copyMenu} from './menu.api';
import {useAdapt} from '/@/hooks/system/useAutoAdapt.ts';
import {useMessage} from '/@/hooks/web/useMessage';
import {listScene} from "./scene/scene.api";

const { createMessage } = useMessage();
// 声明Emits
const emit = defineEmits(['success', 'register']);
const name = ref('')
const { width } = useAdapt();
const [registerForm, {resetFields, validate, setFieldsValue, updateSchema }] = useForm({
  schemas: copyMenuFormSchema,
  showActionButtonGroup: false
});

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  await resetFields()
  name.value = data.record.name
  setFieldsValue({ id: data.record.id})

  updateSchema([
    {
      field: 'sceneId',
      componentProps: {
        optionFilterProp: "label",
        showSearch: true,
        api: listScene
      },
    },
  ])

  setDrawerProps({ confirmLoading: false });
});
//获取弹窗标题
const getTitle = computed(() => '复制菜单 ' + name.value);

//提交事件
async function handleSubmit() {
  try {
    const values = await validate()
    console.log("submit menu: ", values);

    setDrawerProps({ confirmLoading: true });
    await copyMenu(values, () => {
      createMessage.success(`${getTitle.value} 成功`)
    })

    closeDrawer();
    emit('success');
  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}
</script>

